<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考试管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑考试</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 提示信息 -->
      <el-alert
        title="编辑考试/小测信息"
        type="info"
        show-icon
        center
        :closable="false"
      >
      </el-alert>
      <!-- 步骤条 -->
      <el-steps :active="activeIndex * 1" align-center>
        <el-step title="考试/小测信息"></el-step>
        <el-step title="考试/小测题目"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!-- 标签导航区域 选中那个就会自动将对应name属性值绑定到v-model中 -->
      <el-form
        label-position="top"
        :model="editForm"
        ref="addRuleForm"
        label-width="100px"
      >
        <!-- :before-leave="beforeTabLeave"
          @tab-click="tabClick" -->
        <el-tabs tab-position="left" v-model="activeIndex">
          <el-tab-pane label="考试/小测信息" name="0">
            <el-form-item label="名称" prop="">
              <el-input v-model="editForm.description"></el-input>
            </el-form-item>
            <!-- <el-form-item label="类型" prop=""> -->
            <!-- <el-select v-model="value" placeholder="选择考试/小测">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
            <!-- </el-form-item> -->
          </el-tab-pane>
          <el-tab-pane label="考试/小测题目" name="1">
            <!-- 问题列表 -->
            <el-table
              :data="questionList"
              height="390"
              stripe
              border
              ref="multipleTable"
              @selection-change="handleSelectionChange"
            >
              <!-- 多选栏 -->
              <!-- <el-table-column type="index"> </el-table-column> -->
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="questionContent"
                width="400"
                label="问题名称"
              >
              </el-table-column>
              <el-table-column prop="optionList" label="正确答案">
                <template slot-scope="scope">
                  <div v-for="item in scope.row.optionList">
                    <div v-if="item.optionIsCorrect == 1">
                      {{ item.optionContent }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="questionType" width="150" label="问题类型">
                <template slot-scope="scope">
                  <div v-if="scope.row.questionType == 1">单选题</div>
                  <div v-else-if="scope.row.questionType == 2">多选题</div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination> -->
          </el-tab-pane>
          <el-tab-pane label="修改考试/小测" name="2">
            <el-button type="primary" @click="editTestOrQuiz" class="addBtn"
              >确认修改</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //   判断考试还是小测
      value: "1",
      // 问题列表
      questionList: [],
      // tab页签激活值
      activeIndex: "0",
      // 总数
      total: "",
      //   编辑表单
      editForm: {
        description: "",
        qidList: []
      },
      //   编辑校验规则
      addRules: {
        goods_name: [{ required: true, message: "1", trigger: "blur" }],
        goods_price: [
          { required: true, message: "1", trigger: "blur" },
          { type: "number", message: "1" }
        ],
        goods_weight: [
          { required: true, message: "1", trigger: "blur" },
          { type: "number", message: "1" }
        ],
        goods_number: [
          { required: true, message: "1", trigger: "blur" },
          { type: "number", message: "1" }
        ]
      },
      //   分类数据
      cateList: [],
      //   级联选择器属性
      cateProps: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id",
        children: "children"
      },
      cateSelected: [],
      //   动态参数列表
      manyParamsList: [],
      //   静态属性列表
      onlyParamsList: [],
      //   上传图片
      dialogImageUrl: "",
      //   上传图片列表
      fileList: [],
      dialogVisible: false,
      disabled: false,
      //   为上传图片添加token
      headerObj: {
        Authorization: window.sessionStorage.getItem("token")
      },
      // 分页
      pagenum: 1,
      pagesize: 15,
      total: 30,
      // 考试token
      testToken: ""
    };
  },
  methods: {
    // 分页控制
    handleSizeChange(newSize) {
      this.pagesize = newSize;
      this.getQuestionsList();
    },
    handleCurrentChange(newPage) {
      this.pagenum = newPage;
      this.getQuestionsList();
    },
    // 多选勾选时将对应questionId添加到qidList
    handleSelectionChange(rows) {
      //   console.log(rows);
      this.editForm.qidList = [];
      rows.forEach(item => {
        this.editForm.qidList.push(item.questionId);
      });
      console.log(this.editForm.qidList);
    },
    // 获取问题列表
    async getQuestionsList() {
      const { data: res } = await this.$http.get(
        "question/getQuestionList/" + this.pagenum
      );
      if (res.code != 200) {
        return this.$message.error("获取问题列表失败！");
      }
      // 用户列表
      this.questionList = res.data.questionVoList;
      this.total = res.data.total;
    },
    // 修改考试
    async editTestOrQuiz() {
      this.$refs.addRuleForm.validate(async valid => {
        if (!valid) return this.$message.error("请填写必要的信息！");
        console.log(this.editForm);
        if (this.value == 1) {
          // 请求考试接口
          const { data: res } = await this.$http.post(
            "test/updateTest",
            this.editForm
          );
          console.log(res);
        } else {
          // 请求小测接口
          const { data: res } = await this.$http.post(
            "quiz/updateQuiz",
            this.editForm
          );
          console.log(res);
        }
        this.$message.success("修改成功！");
        this.$router.push("/test");
      });
    },
    // 勾选考题
    async getQuestionIdList() {
      const { data: res } = await this.$http.post(
        `test/getTestQuestions/${this.editForm.testId}/${this.testToken}`
      );
      console.log(res);
      if (res.code != 200) {
        return this.$message.error("获取问题列表失败！");
      }
      //   将考题勾选
      res.data.forEach(item1 => {
        this.questionList.forEach((item, index) => {
          // 等表格数据加载完成后
          if (item.questionId == item1.questionId) {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(
                this.questionList[index],
                true
              );
            });
          }
        });
      });
    },
    // 默认勾选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
  },
  computed: {
    cateId() {
      if (this.cateSelected.length === 3) {
        return this.cateSelected[2];
      }
      return null;
    }
  },
  created() {
    this.value = window.sessionStorage.getItem("value");
    if (this.value == 1) {
      this.testToken = window.sessionStorage.getItem("testToken");
      this.editForm.testId = window.sessionStorage.getItem("testId") * 1;
    } else {
      this.editForm.quizId = window.sessionStorage.getItem("quizId") * 1;
    }
    this.editForm.description = window.sessionStorage.getItem("description");
    this.getQuestionsList();
    this.getQuestionIdList();
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.el-checkbox {
  margin: 0 10px 0 0;
}
.el-tabs {
  margin: 40px 0;
}
.addBtn {
  margin-top: 20px;
}
</style>